// category
import { findTopCategory } from '@/api/category'
import { onBeforeRouteUpdate, useRoute } from 'vue-router'
import { ref } from 'vue'
function useCategory () {
  // 如何在setup中获取路由参数？
  // this.$route.param/query.id
  // useRoute useRoute() -> Route === this.$route
  // 如果我想调用方法 this.$router.push()?

  // 路由缓存机制 - 组件复用不会重新初始化 - 生命周期钩子函数不重复执行 - 数据只调用一次而不重复调用 - id变了数据不铺设
  // 解决：干掉缓存 id变化重新执行数据

  // 方案一：<route-view>里加key 简单粗暴让重新加载
  // 方法二：onBeforeRouteUpdate方法 更新id重新掉接口渲染数据
  const route = useRoute()
  const categoryData = ref({})

  // 这个id 做了参数适配 首次渲染数据使用route.params.id 更新时保证id参数时是最新的
  async function loadCategory (id = route.params.id) {
    const res = await findTopCategory(id)
    categoryData.value = res.data.result
  }
  loadCategory()
  // 路由更新前执行回调 每次更新都会执行
  // 除了变化执行，一上来也要执行一次
  onBeforeRouteUpdate((to) => {
    // to:新路由对象
    // console.log(to.params.id)
    // 重新发送我们获取的数据
    loadCategory(to.params.id)
  })
  return {
    categoryData
  }
}

export default useCategory
